<template>
  <div class="home">
    <!-- 顶部导航 -->
    <navbar />
    <!-- 首页轮播 -->
    <van-swipe :autoplay="3000" indicator-color="#e4004f">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" class="swip-item" />
      </van-swipe-item>
    </van-swipe>
    <!-- 首页导航 -->
    <van-grid :gutter="10">
      <van-grid-item to="/goodslist/cakelist">
        <van-icon name="shop" color="#e4004f" size="28px" />
        <span class="van-grid-item__text">蛋糕商城</span>
      </van-grid-item>
      <van-grid-item to="/goodslist/cakelist">
        <van-icon name="bag" color="#e4004f" size="28px" />
        <span class="van-grid-item__text">西点外卖</span>
      </van-grid-item>
      <van-grid-item to="/goodslist/cardlist">
        <van-icon name="point-gift" color="#e4004f" size="28px" />
        <span class="van-grid-item__text">预点自提</span>
      </van-grid-item>
      <van-grid-item to="/goodslist/joinus">
        <van-icon name="location" color="#e4004f" size="28px" />
        <span class="van-grid-item__text">自助查询</span>
      </van-grid-item>
    </van-grid>
    <!-- 热门商品 -->
    <p style="text-align: center; color: red"><b>—— 美味惠不断 ——</b></p>
    <van-grid :gutter="10" :column-num="2">
      <van-grid-item>
        <van-image
          src="http://static.wdmcake.cn/data/afficheimg/1617142396071310272.jpg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="http://static.wdmcake.cn/data/afficheimg/1609367344065887402.jpg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="http://static.wdmcake.cn/data/afficheimg/1617142396071310272.jpg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="http://static.wdmcake.cn/data/afficheimg/1609367344065887402.jpg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="http://static.wdmcake.cn/data/afficheimg/1617142396071310272.jpg"
        />
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="http://static.wdmcake.cn/data/afficheimg/1609367344065887402.jpg"
        />
      </van-grid-item>
    </van-grid>
    <!-- 底部选项卡 -->
    <tabbar />
  </div>
</template>

<script>
import Navbar from "../components/Navbar.vue";
import Tabbar from "../components/Tabbar.vue";
export default {
  components: { Tabbar, Navbar },
  data() {
    return {
      // image 用于存储首页轮播图
      images: [
        "http://static.wdmcake.cn/data/afficheimg/1636911980545857918.jpg",
        "http://static.wdmcake.cn/data/afficheimg/1636393722731523777.jpg",
      ],
    };
  },
};
</script>

<style scoped>
/* 首页背景颜色 */
.home {
  background-color: #f5f5f5;
}
/* 首页导航样式 */
.van-grid-item__text {
  color: #e4004f;
}
/* 轮播图样式 */
.swip-item {
  width: 100vw;
  height: 50vw;
}
</style>
